import { useState, useEffect } from 'react';
import { Col, Row, Select, Radio, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { queryDataRate } from '@/services/panel'
import ColumnChart from './components/ColumnChart';
import CircusChart from './components/CircusChart'
import CircusChart2 from './components/CircusChart2';
import CircusChart3 from './components/CircusChart3';
import CircusPanel from './components/CircusPanel';
import styles from './index.less';
const { Option } = Select

const PanelPage = (props) => {
  const currYear = new Date().getFullYear();
  let yearLists = new Array(10).fill(0).map((item, index) => {
      return index === 0 ? currYear : Number(currYear) + Number(index);
  });
  const [year, setYear] = useState(currYear)
  const [quarter,setQuarter] = useState('0')
  const [type, setType] = useState('1')
  const [rateObj, setRateObj] = useState(null)

  const opts = [
    { value: '0', text: '年度' },
    { value: '1', text: '一季度' },
    { value: '2', text: '二季度' },
    { value: '3', text: '三季度' },
    { value: '4', text: '四季度' }
  ]

  useEffect(()=>{
    getData();
    setRateObj({
      completeRate: 0.87,
      relationRate:0.43,
      scoreRate: 0.38,
      updateRate: 0.92
    })
  },[year,quarter,type])

  const getData = async () => {
    let res =  await queryDataRate({year,quarter,type,})
    if(res.code == 200){
      let rateObj = res?.data??{};
      // setRateObj(rateObj)
    }
  }

  const handleYear = (val) => { setYear(val) }
  const handleQuater = (val) => { setQuarter(val) }
  const onChange = (e) => { setType(e.target.value) }
  
  return (
    <div className={styles.panel_root}>
      <Row style={{ margin: '10px' }}>
        <Col span={12}>
            <Select style={{width:'100px'}} onChange={handleYear} value={year}>
              {yearLists.map((item, i)=>(<Option key={i} value={item}>{item}</Option>))}
            </Select>
            <Select style={{width:'100px',margin:'0 10px'}} onChange={handleQuater} value={quarter}>
              {opts.map((item, i)=>(<Option key={i} value={item.value}>{item.text}</Option>))}
            </Select>
            <Radio.Group onChange={onChange} value={type}>
              <Radio value={'1'}>部门</Radio>
              <Radio value={'2'}>个人</Radio>
            </Radio.Group>
        </Col>
      </Row>
      {/* <Row style={{ width: '100%',padding: '20px' }} gutter={40}>
        <Col span={6} style={{ padding: '20px' }}>
          <div className={styles.img_title}></div>
          <ColumnChart year={year} quarter={quarter} type={type}/>
          <div>应时刻关注Object的进度</div>
          <CircusChart year={year} quarter={quarter} type={type}></CircusChart>
          <div>每个Object数量以3-5个为宜</div>
        </Col>
        <Col span={11}>
          <div className={styles.rate_wrap}>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>填写率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.completeRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>关联比率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.relationRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>打分率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.scoreRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>近七天状态更新率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.updateRate??0) * 100}%</span>
             </div>
          </div>
          <CircusPanel year={year} quarter={quarter} type={type}></CircusPanel>
        </Col>
        <Col span={6}>
          <CircusChart2 year={year} quarter={quarter} type={type}></CircusChart2>
          <div>有风险或已延期的Object需特别关注</div>
          <CircusChart3 year={year} quarter={quarter} type={type}></CircusChart3>
          <div>分数低的的Object需特别关注</div>
        </Col>
      </Row> */}
      {type == '1' && <>
      <Row style={{ width: '100%',padding: '20px' }} gutter={50}>
        <Col span={4}>
          <div className={styles.rate_wrap}>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>填写率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.completeRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>关联比率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.relationRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>打分率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.scoreRate??0) * 100}%</span>
             </div>
             <div className={styles.rate_wrap_inner}>
                 <span className={styles.rate_wrap_text}>近七天状态更新率&nbsp;&nbsp;
                 <Tooltip placement="rightTop" title={'text'}>
                   <InfoCircleOutlined />
                 </Tooltip>
                 </span>
                 <span>{Number(rateObj?.updateRate??0) * 100}%</span>
             </div>
          </div>
        </Col>
        <Col span={20}>
          <CircusPanel year={year} quarter={quarter} type={type}></CircusPanel>
        </Col>
        {/* <Col>
          排行榜
        </Col> */}
      </Row>
      <div className={styles.canvas_banner}>
        <div span={6} className={styles.canvas_wrap} style={{padding: '20px 20px 50px 20px'}}>
          <div className={styles.canvas_wrap_head}>Object进度</div>
          <ColumnChart year={year} quarter={quarter} type={type}/>
          <div className={styles.canvas_wrap_bottom}>应时刻关注Object的进度</div>
        </div>
        <div span={6} className={styles.canvas_wrap}>
          <div className={styles.canvas_wrap_head}>Object数量</div>
          <CircusChart year={year} quarter={quarter} type={type}></CircusChart>
          <div className={styles.canvas_wrap_bottom}>每个Object数量以3-5个为宜</div>
        </div>
        <div span={6} className={styles.canvas_wrap}>
          <div className={styles.canvas_wrap_head}>Object状态</div>
          <CircusChart2 year={year} quarter={quarter} type={type}></CircusChart2>
          <div className={styles.canvas_wrap_bottom}>有风险或已延期的Object需特别关注</div>
        </div>
        <div span={6} className={styles.canvas_wrap}>
          <div className={styles.canvas_wrap_head}>Object权重/分数对比</div>
          <CircusChart3 year={year} quarter={quarter} type={type}></CircusChart3>
          <div className={styles.canvas_wrap_bottom}>分数低的的Object需特别关注</div>
        </div>
      </div>
      </>}
      {type == '2' && <>
        
      </>}
      
    </div>
  );
};

export default PanelPage;
